/**
 * json配置举例，更多配置请看 IConfigSchema
 * @author luguoxiang
 * @date 2022/7/5
 * 开源项目：https://gitee.com/lgx1992/lg-soar 求star！请给我star！请帮我点个star！
 */
import {
  IConfigSchema,
  LgBizSelect,
  LgBizSelectProps,
  LgBizTree,
  LgBizTreeProps,
  LgDictProps,
  LgIcon,
  LgText,
  LgTextProps,
} from '@/soar';
import api from './api';
import permitApi from '../permit/api';
import IconPicker from '@/components/IconPicker/index.vue';
// 获取全部图标的列表

const TYPES = {
  0: [3, 2, 1],
  1: [3, 2],
  2: [3, 2],
  3: [3],
};

const fieldList: IConfigSchema<any>[] = [
  {
    field: 'type',
    label: '类型',
    dataType: 'dict',
    params: 'MenuTypeEnum',
    table: {
      width: 80,
      sorter: true,
    },
    form: {
      rules: true,
      componentProps: {
        component: 't-radio-group',
      },
    },
  },
  {
    field: 'parentId',
    label: '所属父级',
    dataType: 'string',
    table: false,
    search: false,
    form: {
      rules: true,
      vif({ data }): boolean {
        return data.type !== 3;
      },
      component: LgBizTree,
      componentProps({ data }) {
        return {
          fields: 'id,title,parentId',
          filters: [`type-in~${TYPES[data.type]?.join('~') ?? 3}`],
          data: api.query,
          prepend: { value: '0', label: '根节点' },
        } as LgBizTreeProps;
      },
    },
    detail: {
      valueProp: 'modelValue',
      component: LgText,
      componentProps: {
        api: api.query,
        labelField: 'title',
      } as LgTextProps,
    },
  },
  {
    field: 'title',
    label: '名称',
    dataType: 'string',
    form: {
      rules: true,
    },
    table: {
      order: -1,
    },
  },
  {
    field: 'component',
    label: '组件',
    dataType: 'string',
    form: {
      rules({ data }) {
        if (data.type === 1) {
          return [{ required: true, message: '组件必填' }];
        }
        return [{ required: false }];
      },
      slots: 'component',
      vif({ data }) {
        return data.type === 1 || data.type === 2;
      },
    },
    table: {
      ellipsis: true,
    },
    detail: {
      vif({ data }) {
        return data.type === 1 || data.type === 2;
      },
    },
  },
  {
    field: 'path',
    label: '路径',
    dataType: 'string',
    form: {
      rules: true,
      vif({ data }) {
        return data.type !== 0;
      },
      slots: 'path',
    },
    table: {
      ellipsis: true,
    },
    detail: {
      vif({ data }) {
        return data.type !== 0;
      },
    },
  },
  {
    field: 'code',
    label: '权限码',
    dataType: 'string',
    form: {
      rules({ data }) {
        return [{ required: data.type === 0, message: '权限码必填' }];
      },
      componentProps({ data }) {
        return {
          placeholder: data?.path || '编码（路由名称）',
        };
      },
    },
    table: {
      ellipsis: true,
    },
  },
  {
    field: 'icon',
    label: '图标',
    dataType: 'string',
    search: false,
    table: {
      width: 70,
      align: 'center',
      cell: (h, { row }) => h(LgIcon, { value: row.icon }),
    },
    detail: {
      component: 't-icon',
      valueProp: 'name',
      vif({ data }): boolean {
        return data.type !== 0;
      },
    },
    form: {
      vif({ data }): boolean {
        return data.type !== 0;
      },
      component: IconPicker,
    },
  },
  {
    field: 'redirect',
    label: '重定向路径',
    dataType: 'string',
    form: {
      vif({ data }) {
        return data.type === 2 || data.type === 3;
      },
    },
    table: {
      ellipsis: true,
    },
    detail: {
      vif({ data }) {
        return data.type === 2 || data.type === 3;
      },
    },
  },
  {
    field: 'remark',
    label: '备注',
    dataType: 'string',
    form: {
      component: 't-textarea',
    },
    table: false,
  },
  {
    field: 'sort',
    label: '排序',
    dataType: 'number',
    table: {
      width: 120,
      slots: 'sort',
      sorter: true,
    },
    form: {
      vif({ data }): boolean {
        return data.type !== 0;
      },
    },
    detail: {
      vif({ data }): boolean {
        return data.type !== 0;
      },
    },
  },
  {
    field: 'status',
    label: '状态',
    dataType: 'dict',
    params: 'MenuStatusEnum',
    form: {
      rules: true,
      componentProps: {
        component: 't-radio-group',
      } as LgDictProps,
    },
    table: {
      width: 80,
    },
  },
  {
    field: 'hideChildren',
    label: '隐藏子菜单',
    dataType: 'boolean',
    form: {
      vif({ data }) {
        return data.type === 2;
      },
    },
    detail: {
      vif({ data }) {
        return data.type === 2;
      },
    },
    table: false,
  },
  {
    field: 'keepalive',
    label: '是否缓存',
    dataType: 'boolean',
    form: {
      vif({ data }) {
        return data.type === 1;
      },
    },
    detail: {
      vif({ data }) {
        return data.type === 1;
      },
    },
    table: {
      width: 80,
      align: 'center',
      slots: 'keepalive',
    },
  },
  {
    field: 'shared',
    label: '是否共享页签',
    dataType: 'boolean',
    form: {
      vif({ data }) {
        return data.type === 1;
      },
    },
    detail: {
      vif({ data }) {
        return data.type === 1;
      },
    },
    table: false,
  },
  {
    field: 'permitIds',
    label: '接口权限',
    dataType: 'string',
    form: {
      vif({ data }) {
        return data.type === 0 || data.type === 1;
      },
      colProps: {
        style: '--lg-grid-min: 2;--lg-grid-max: 2',
      },
      component: LgBizSelect,
      componentProps: {
        data: permitApi.query,
        multiple: true,
        fields: 'id,name,code',
        search: true,
        labelField: '【${name}】${code}',
      } as LgBizSelectProps,
    },
    detail: {
      valueProp: 'modelValue',
      component: LgText,
      componentProps: {
        api: permitApi.query,
      } as LgTextProps,
      vif({ data }) {
        return data.type === 0 || data.type === 1;
      },
    },
    table: false,
  },
];

export default fieldList;
